<table class="po-table-master-detail">
  @if (typeHeaderTop) {
    <thead>
      <tr>
        @if (isSelectable) {
          <th class="po-table-header po-table-column-selectable"></th>
        }
        <th class="po-table-header po-table-header-column po-table-header-master-detail"></th>
        @for (detail of detail.columns; track detail) {
          <th class="po-table-header po-table-header-ellipsis">
            <div
              class="po-table-header-flex"
              [class.po-table-header-flex-right]="detail.type === 'currency' || detail.type === 'number'"
            >
              {{ getColumnTitleLabel(detail) }}
            </div>
          </th>
        }
      </tr>
    </thead>
  }
  <tbody>
    @for (item of items; track item) {
      <tr class="po-table-detail-row" [class.po-table-row-active]="item.$selected && isSelectable">
        @if (isSelectable) {
          <td class="po-table-column-master-detail-space-checkbox"></td>
          <td class="po-table-column po-table-column-selectable">
            <po-checkbox
              name="checkbox"
              (p-change)="onSelectRow(item)"
              [p-checkboxValue]="item.$selected"
              [p-size]="componentsSize"
            ></po-checkbox>
          </td>
        } @else {
          <td class="po-table-column-master-detail-space"></td>
        }
        @for (detail of detailColumns; track detail) {
          <td
            class="po-table-column-master-detail po-table-master-detail-label"
            (click)="isSelectable ? onSelectRow(item) : 'javascript:;'"
            [class.po-table-column-right]="typeHeaderTop && (detail.type === 'currency' || detail.type === 'number')"
          >
            @if (typeHeaderInline) {
              <strong> {{ getColumnTitleLabel(detail) }}: </strong>
            }
            @switch (detail.type) {
              @case ('currency') {
                <span>{{ getDetailData(item, detail) | currency: detail.format : 'symbol' : '1.2-2' }}</span>
              }
              @case ('date') {
                <span>{{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy' }}</span>
              }
              @case ('time') {
                <span>{{ getDetailData(item, detail) | po_time: detail.format || 'HH:mm:ss.ffffff' }}</span>
              }
              @case ('dateTime') {
                <span>
                  {{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy HH:mm:ss' }}
                </span>
              }
              @case ('number') {
                <span>{{ formatNumberDetail(getDetailData(item, detail), detail.format) }}</span>
              }
              @default {
                <span>{{ getDetailData(item, detail) }}</span>
              }
            }
          </td>
        }
      </tr>
    }
  </tbody>
</table>
